<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-zhibiao">
        <input id="tableId" name="tableId" th:value="${id}" type="hidden">
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">部门名称：</label>
                    <div class="col-sm-8">
                        <div class="form-control-static" th:text="${table.deptName}"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">负责人：</label>
                    <div class="col-sm-8">
                        <div class="form-control-static" th:text="${table.leader}"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">绩效方案名称：</label>
                    <div class="col-sm-8">
                        <div class="form-control-static" th:text="${table.projectName}"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tableArea" id="tableDiv">
            <h4 class="form-header h4">绩效考评</h4>
            <table class="table table-striped" id="table">
                <!--在此处填充表格数据-->
            </table>
        </div>
    </form>
</div>
<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button class="btn btn-sm btn-primary" onclick="doSubmit()" type="button"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button class="btn btn-sm btn-danger" onclick="closeItem()" type="button"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/select/select2.js}"></script>
<script th:inline="javascript" type="text/javascript">
    var prefix = ctx + "zzjx/pefassproject";
    $(function () {
        doChange(); //初始化表格信息
    })

    /**
     * 更改模板，重新加载预览信息
     * @returns {boolean}
     */
    function doChange() {
        var tableId = $("#tableId").val(); //表单id
        if (tableId != "") {
            $.modal.loading("请等待加载预览信息!");
            $.ajax({
                url: ctx + "zzjx/pefctasstable/preview"
                , data: {"tableId": tableId}
                , dataType: "JSON"
                , type: "GET"
                , async: false
                , success: function (result) {
                    var dictData = result.dictData;
                    var list = result.list;
                    buildTable($('#table'), dictData.length, list.length, dictData, list);
                    $.modal.closeLoading();
                }, error: function () {
                    $.modal.closeLoading();
                    $.modal.alertError("获取预览信息失败!");
                }
            })
        }
    }

    function doSubmit() {
        if ($.validate.form()) {
            var data = $("#form-zhibiao").serializeArray();
            data.push({"name": "tableDataJson", "value": JSON.stringify($("#table").bootstrapTable('getData'))});
            $.operate.saveTab(ctx + "zzjx/pefctasstable/doUpdateTableIndData", data);
        }
    }

    /**
     * 构建预览信息表格
     * @param $el
     * @param cells
     * @param rows
     * @param dictData
     * @param peftempletindicatorList
     */
    function buildTable($el, cells, rows, dictData, peftempletindicatorList) {
        var i, j, row,
            columns = [],
            data = [];
        //拼接table,拼接表头
        for (var dd in dictData) {
            var dictLabel = dictData[dd]["dictLabel"];//显示名称
            var dictValue = dictData[dd]["dictValue"];//字段值

            var f = {};
            if (dictValue == "id") {
                f = {
                    field: dictValue,
                    title: dictLabel,
                    visible: false
                }
            }
            /*else if (dictValue.slice(0,6) == "target") {
                f = {
                    field: dictValue,
                    title: dictLabel,
                    formatter: function (value, row , index) {
                        if (value != null && value != ""){
                            return '<input type="text" style="width: 50px;" name="'+dictLabel+'" value="'+value+'" onblur="changeData('+ index +', this);" />';
                        }else{
                            return '<input type="text" style="width: 50px;" name="'+dictLabel+'" onblur="changeData('+ index +', this);" />';
                        }
                    }
                }
            }*/
            else {
                f = {
                    field: dictValue,
                    title: dictLabel
                }
            }
            columns.push(f);
        }

        //拼接数据
        for (var i in peftempletindicatorList) {
            row = {};
            for (var dd in dictData) {
                var dictValue = dictData[dd]["dictValue"];//字段值
                for (var key in peftempletindicatorList[i]) {    //map key 
                    //console.log(key);
                    //console.log(peftempletindicatorList[i][key]);  //map value
                    if (key == dictValue) {
                        if (dictValue == "checkcyc") {
                            row[key] = $.table.selectDictLabel([[${@dict.getType('zzjx_pefindicator_checkcyc')}]], peftempletindicatorList[i][key]);
                        } else {
                            row[key] = peftempletindicatorList[i][key];
                        }
                    }
                }
            }
            data.push(row);
        }

        $el.bootstrapTable('destroy').bootstrapTable({
            columns: columns,
            data: data,
            search: false,
            /**
             * @param {点击列的 field 名称} field
             * @param {点击列的 value 值} value
             * @param {点击列的整行数据} row
             * @param {td 元素} $element
             */
            onClickCell: function (field, value, row, $element) {
                if (field.slice(0, 6) == "target" || field.slice(-3) == "Get") {
                    $element.attr('contenteditable', true);
                    $element.blur(function () {
                        var index = $element.parent().data('index');
                        var tdValue = $element.html();
                        saveData(index, field, tdValue);
                    })
                }
            }
        });
    }

    function saveData(index, field, value) {
        $("#table").bootstrapTable('updateCell', {
            index: index,       //行索引
            field: field,       //列名
            value: value        //cell值
        })
    }

    function changeData(index, obj) {
        var value = $(obj).val();
        var name = $(obj).attr('name');
        //通过 index 获取指定的行
        var row = $("#table").bootstrapTable('getOptions').data[index];
        //将 input 的值存进 row 中
        row[name] = value;
        //更新指定的行，调用 'updateRow' 则会将 row 数据更新到 data 中，然后再重新加载
        $("#table").bootstrapTable('updateRow', {index: index, row: row});
    }
</script>
</body>
</html>
